<template>
    <!-- block3 -->
    <div class="max-width block3">
        <div class="block3-arrow-container" @click="onPrev">
            <i class="i-carbon-chevron-left" />
        </div>
        <el-carousel ref="block3CarouselRef" indicator-position="" height="420px" arrow="never" class="w-full z-888">
            <el-carousel-item v-for="v in dataList" :key="v" class="flex-1" :interval="5000">
                <div class="block3-container">
                    <div class="basis-5/10">
                        <el-image class="block3-img" :src="v.url" fit="cover" />
                    </div>
                    <div class="basis-6/10">
                        <div class="block3-right-container">
                            <div class="block3-right-text1">
                                {{ v.text1 }}
                            </div>
                            <div class="block3-right-text23-container">
                                <div class="block3-right-text2">
                                    {{ v.text2 }}
                                </div>
                                <div class="block3-right-text3">
                                    {{ v.text3 }}
                                </div>
                            </div>
                            <div
                                class="block3-right-text4"
                                :class="{
                                    'block3-right-text4-arrow': v.text4_arrow
                                }"
                            >
                                <div>{{ v.text4 }}</div>
                                <div v-if="v.text4_arrow" class="i-carbon-arrow-up-right text-[18px]"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </el-carousel-item>
        </el-carousel>
        <div class="block3-arrow-container" @click="onNext">
            <i class="i-carbon-chevron-right" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from "vue"

const block3CarouselRef = ref(null)
const dataList = [
    {
        url: "/block3/1.png",
        text1: "PAMENTS",
        text2: "Coindesk: ‘PayPal Makes Retail Stablecoin Play with PYUSD on Solana’",
        text3: "PayPal USD (PYUSD) is expanding to Solana, taking advantage of native token extensions.",
        text4: "READ",
        text4_arrow: true
    },
    {
        url: "/block3/2.png",
        text1: "NEWS",
        text2: "The Block: Robinhood Launches Solana Staking in Europe",
        text3: "The news brings a new staking option to the EU.",
        text4: "READ",
        text4_arrow: true
    },
    {
        url: "/block3/3.png",
        text1: "BREAKPOINT 2024",
        text2: "First Speakers Announced for Breakpoint, 20-21 Sept. 2024",
        text3: "The lineup features speakers from Visa, ByBit, Circle, Helium, Fireblocks, and more.",
        text4: "READ MORE",
        text4_arrow: false
    },
    {
        url: "/block3/4.png",
        text1: "PAMENTS",
        text2: "TechCrunch: Stripe to Start Taking Payments with USDC on Solana",
        text3: "The news was announced live on stage at Stripe’s Connect conference – complete with a live demo of a transaction on Solana.",
        text4: "LEARN MORE",
        text4_arrow: true
    },
    {
        url: "/block3/5.png",
        text1: "Solutions",
        text2: "Blinks and Actions Put ‘Crypto Back in Crypto Twitter’",
        text3: "From Decrypt: “The new features will allow users to connect and send transactions without having to leave the website they are currently on.”",
        text4: "READ MORE",
        text4_arrow: true
    }
]

const onPrev = () => {
    block3CarouselRef.value.prev()
}

const onNext = () => {
    block3CarouselRef.value.next()
}
</script>

<style scoped>
.block3 {
    --at-apply: h-[450px] flex justify-center items-center gap-[7px];
}
.block3-arrow-container {
    --at-apply: w-[50px] h-[50px] flex justify-center items-center
    text-[#494949] cursor-pointer hover:text-[#fff] text-[36px];
}
.block3-container {
    --at-apply: p-[40px] bg-[#1B1622] rounded-[10px] flex items-center gap-[40px];
}
.block3-img {
    --at-apply: w-full h-[300px] flex justify-center items-center rounded-[5px];
}
.block3-right-container {
    --at-apply: flex flex-col justify-center items-center gap-[30px] px-[20px];
}
.block3-right-text1 {
    --at-apply: text-[17px] text-#000 p-[8px_10px] rounded-[25px]
    bg-[linear-gradient(90deg,#14f195,#64a8f2_51.04%,#80ecff)];
}
.block3-right-text23-container {
    --at-apply: flex flex-col justify-center items-center flex-wrap gap-[10px];
}
.block3-right-text2 {
    --at-apply: leading-[118%] font-400 text-[25px] text-[#9D9DAE];
}
.block3-right-text3 {
    --at-apply: leading-[118%] font-400 text-[20px] text-[#9D9DAE];
}
.block3-right-text4 {
    --at-apply: p-[8px_15px] rounded-[25px] bg-[rgba(0,0,0,0.5)] border-(1px solid #fff)
    cursor-pointer hover:(bg-[#fff] text-[#000]);
}
.block3-right-text4-arrow {
    --at-apply: flex items-center gap-[10px];
}
</style>
